<template>
    <div>
        <Header></Header>
        <div id="mychart" :style="{width: '98%', height: '500%'}"></div>
        <Footer></Footer>
    </div>
</template>

<script>

    import Header from "@/components/Header";
    import Footer from "@/components/Footer";

    export default {
        name: "demo1",
        data() {
            return {
                linkList: [],
                dataList:[]
            }
        },
        components: {
            Header, Footer
        },
        mounted() {
            this.initChart();
        },
        methods: {
            initChart() {

                const _this = this
                this.$axios.get('alldata').then((res) => {
                    console.log('访问后台');
                    _this.linkList = res.data.data[0]
                    _this.dataList = res.data.data[1]
                    console.log(_this.allDataList);
                    let myChart = this.$echarts.init(document.getElementById("mychart"))
                    myChart.setOption({
                        title : {
                            text: '数量',        // **
                            subtext: '各项数目展示'
                        },
                        xAxis: {
                            type: 'category',
                            data: _this.linkList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: _this.dataList,
                            type: 'bar',
                            color: 'purple',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    })
                });

            },
        }
    }
</script>

